<template>
<div class="tui">
  <div class="main">
    <div class="content">
      <div class="left">
        <div class="part" @click="changeSearch('商标注册查询','商标名称')">
          <div class="intro">
            <div class="img"></div>
            <div class="txt">
              <p>查询您的商标名称<br/>是否合法或已被注册&nbsp;&nbsp;</p>
              <div class="h4">
                <div class="icon">
                  <img src="@/assets/images/icon_arrowb.png" class="blue"/>
                  <img src="@/assets/images/icon_arroww.png" class="white"/>
                </div>
                <span>商标注册查询</span>
              </div>
            </div>
          </div>
          <img src="@/assets/images/img_hover.png" class="image hover"/>
        </div>
        <div class="part" @click="changeSearch('商标号查询','商标号')">
          <div class="intro">
            <div class="img"></div>
            <div class="txt">
              <p>查询已申请的商标<br/>获取最新注册进度&nbsp;&nbsp;</p>
              <div class="h4">
                <div class="icon">
                  <img src="@/assets/images/icon_arrowb.png" class="blue"/>
                  <img src="@/assets/images/icon_arroww.png" class="white"/>
                </div>
                <span>商标号查询</span>
              </div>
            </div>
          </div>
          <img src="@/assets/images/img_hover.png" class="hover"/>
        </div>
        <div class="part" @click="changeSearch('注册人查询','注册人')">
          <div class="intro">
            <div class="img"></div>
            <div class="txt">
              <p>通过注册人查询<br/>搜索您名下的商标信息&nbsp;&nbsp;</p>
              <div class="h4">
                <div class="icon">
                  <img src="@/assets/images/icon_arrowb.png" class="blue"/>
                  <img src="@/assets/images/icon_arroww.png" class="white"/>
                </div>
                <span>注册人查询</span>
              </div>
            </div>
          </div>
          <img src="@/assets/images/img_hover.png" class="hover"/>
        </div>
      </div>
      <div class="form">
        <div class="tit"><span>{{ maskSearch.title }}</span></div>
        <p>
          <span>{{ maskSearch.tit }}</span>
          <input type="text" class="input sbmc" v-model="maskSearch.name"/>
        </p>
        <p>
          <span>请选择类型</span>
          <a class="list">
            <a-radio-group :default-value="1">
              <a-radio :value="1">中文</a-radio>
              <a-radio :value="2">英文</a-radio>
              <a-radio :value="3">数字</a-radio>
              <a-radio :value="4">图形</a-radio>
              <a-radio :value="5">中文+英文</a-radio>
            </a-radio-group>
          </a>
        </p>
        <a class="submit" @click="showSearch"><span>点击查询</span><img src="@/assets/images/img_arrow.png"/></a>
      </div>
    </div>
  </div>
  <div class="footBar">
    <div class="container">
      <div class="tit">网站导航</div>
      <div class="nav">
        <a class="down" @click="showDown">国际尼斯分类表下载</a>
        <a class="apply" @click="showApply">商标快捷申请</a>
        <a class="human" @click="onSwt">人工服务</a>
      </div>
    </div>
  </div>
  <div class="mask maskSearch" v-if="maskSearch.show">
    <div class="box">
      <img src="@/assets/images/img_close.png" class="close" @click="showSearch"/>
      <div class="info">
        <p>Trademark Registration Inquiry System</p>
        <h4>商标注册查询系统</h4>
      </div>
      <div class="form">
        <div class="tit" style="justify-content: center;">{{ maskSearch.title }}</div>
        <a-form-model :model="maskSearch">
          <a-form-model-item>
            <a-input class="input sbmc" v-model="maskSearch.name" placeholder="请输入查询内容"/>
          </a-form-model-item>
          <a-form-model-item>
            <a-input class="input sjhm" v-model="maskSearch.phone" placeholder="请输入手机号码"/>
          </a-form-model-item>
          <a-form-model-item class="getCode">
            <a-input class="input code" v-model="maskSearch.code" placeholder="请输入验证码"/>
            <a-button @click="sendSms1" :disabled="disabled">{{ btnText }}</a-button>
          </a-form-model-item>
          <a-form-model-item class="submit">
            <a-button @click="onSubmit1">提交查询</a-button>
          </a-form-model-item>
        </a-form-model>
        <div class="phone">统一咨询热线: 400-9932-799</div>
      </div>
    </div>
  </div>
  <div class="mask maskApply" v-if="maskApply.show">
    <div class="box">
      <img src="@/assets/images/img_close.png" class="close" @click="showApply"/>
      <div class="info">
        <p>Trademark Registration Inquiry System</p>
        <h4>商标注册查询系统</h4>
      </div>
      <div class="form">
        <div class="tit">商标快捷申请</div>
        <a-form-model :model="maskApply">
          <a-form-model-item>
            <a-input class="input sbmc" v-model="maskApply.name" placeholder="请输入商标名称"/>
          </a-form-model-item>
          <a-form-model-item>
            <a-input class="input sjhm" v-model="maskApply.phone" placeholder="请输入手机号码接收申请方案"/>
          </a-form-model-item>
          <a-form-model-item class="getCode">
            <a-input class="input code" v-model="maskApply.code" placeholder="请输入验证码"/>
            <a-button @click="sendSms2" :disabled="disabled">{{ btnText }}</a-button>
          </a-form-model-item>
          <a-form-model-item class="submit">
            <a-button @click="onSubmit2">提交查询</a-button>
          </a-form-model-item>
        </a-form-model>
        <div class="phone">统一咨询热线: 400-9932-799</div>
      </div>
    </div>
  </div>
  <div class="mask maskHuman" v-if="maskHuman.show">
    <div class="box">
      <img src="@/assets/images/img_close.png" class="close" @click="showHuman"/>
      <div class="info">
        <p>Trademark Registration Inquiry System</p>
        <h4>商标注册查询系统</h4>
      </div>
      <div class="form">
        <div class="tit">人工服务</div>
        <div class="txt">请输入手机号码接收免费来电，稍后将有工作人员为您提供咨询，请保持电话畅通。</div>
        <a-form-model :model="maskHuman">
          <a-form-model-item>
            <a-input class="input sjhm" v-model="maskHuman.phone" placeholder="请输入手机号码"/>
          </a-form-model-item>
          <a-form-model-item class="getCode">
            <a-input class="input code" v-model="maskHuman.code" placeholder="请输入验证码"/>
            <a-button @click="sendSms3" :disabled="disabled">{{ btnText }}</a-button>
          </a-form-model-item>
          <a-form-model-item class="submit">
            <a-button @click="onSubmit3">提交查询</a-button>
          </a-form-model-item>
        </a-form-model>
        <div class="phone">统一咨询热线: 400-9932-799</div>
      </div>
    </div>
  </div>
  <div class="mask maskDown" v-if="maskDown.show">
    <div class="box">
      <img src="@/assets/images/img_close.png" class="close" @click="showDown"/>
      <div class="info">
        <p>Trademark Registration Inquiry System</p>
        <h4>商标注册查询系统</h4>
      </div>
      <div class="form">
        <div class="tit">尼斯分类表下载</div>
        <div class="txt">本栏目为社会公众提供尼斯分类表，因系统数据会随政策更新，建议预留联系方式，及时接收分类表更新通知。</div>
        <a-form-model :model="maskDown">
          <a-form-model-item>
            <a-input class="input sjhm" v-model="maskDown.phone" placeholder="请输入手机号码接收更新通知"/>
          </a-form-model-item>
          <a-form-model-item class="getCode">
            <a-input class="input code" v-model="maskDown.code" placeholder="请输入验证码"/>
            <a-button @click="sendSms4" :disabled="disabled">{{ btnText }}</a-button>
          </a-form-model-item>
          <a-form-model-item class="submit">
            <a-button @click="onSubmit4">提交查询</a-button>
          </a-form-model-item>
        </a-form-model>
        <div class="phone">统一咨询热线: 400-9932-799</div>
      </div>
    </div>
  </div>
  <div class="mask maskSuccess" v-if="maskSuccess">
    <div class="box">
      <img src="@/assets/images/img_close.png" class="close" @click="showSuccess"/>
      <div class="info">
        <p>Trademark Registration Inquiry System</p>
        <h4>商标注册查询系统</h4>
      </div>
      <div class="form">
        <div class="tit"><img src="@/assets/images/img_right.jpg"/>提交成功</div>
        <div class="txt">系统已收到您的信息，稍后您将收到免费来电，进行信息确认与相关咨询，请保持电话畅通。</div>
        <a class="sure" @click="showSuccess">确定</a>
        <div class="phone">统一咨询热线: 400-9932-799</div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import apis from '@/api'
import { mapGetters } from 'vuex'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import store from 'store'
import $ from 'jquery'

export default {
  name: 'sbzc',
  data () {
    return {
      token: store.get(ACCESS_TOKEN),
      keyword: '',
      maskSearch: {
        name: '',
        phone: '',
        code: '',
        show: false,
        title: '商标注册查询',
        tit: '商标名称'
      },
      maskApply: {
        name: '',
        phone: '',
        code: '',
        show: false
      },
      maskHuman: {
        phone: '',
        code: '',
        show: false
      },
      maskDown: {
        phone: '',
        code: '',
        show: false
      },
      maskSuccess: false,
      code: '',
      disabled: false,
      count: 60,
      btnText: '发送验证码',
      timer: null
    }
  },
  methods: {
    onSwt () {
      window.open(apis.Swt)
    },
    changeSearch (str1, str2) {
      this.maskSearch.title = str1
      this.maskSearch.tit = str2
    },
    showSearch () {
      this.maskSearch.show = !this.maskSearch.show
      clearInterval(this.timer)
      this.btnText = '发送验证码'
      this.count = 60
      this.disabled = false
    },
    showApply () {
      this.maskApply.show = !this.maskApply.show
      clearInterval(this.timer)
      this.btnText = '发送验证码'
      this.count = 60
      this.disabled = false
    },
    showHuman () {
      this.maskHuman.show = !this.maskHuman.show
      clearInterval(this.timer)
      this.btnText = '发送验证码'
      this.count = 60
      this.disabled = false
    },
    showDown () {
      this.maskDown.show = !this.maskDown.show
      clearInterval(this.timer)
      this.btnText = '发送验证码'
      this.count = 60
      this.disabled = false
    },
    showSuccess () {
      this.maskSuccess = !this.maskSuccess
    },
    sendSms1 () {
      const app = this
      $.ajax('http://api.zhuoyitm.site/alisms/phone_val', {
        type: 'GET',
        dataType: 'JSONP',
        data: {
          'tel': app.maskSearch.phone,
          'site': 'zy'
        },
        success: res => {
          if (res.success) {
            app.code = res.code
            app.countDown()
          } else {
            app.$warning({
              title: '短信发送出现错误，请稍后再试！'
            })
          }
        }
      })
    },
    sendSms2 () {
      const app = this
      $.ajax('http://api.zhuoyitm.site/alisms/phone_val', {
        type: 'GET',
        dataType: 'JSONP',
        data: {
          'tel': app.maskApply.phone,
          'site': 'zy'
        },
        success: res => {
          if (res.success) {
            app.code = res.code
            app.countDown()
          } else {
            app.$warning({
              title: '短信发送出现错误，请稍后再试！'
            })
          }
        }
      })
    },
    sendSms3 () {
      const app = this
      $.ajax('http://api.zhuoyitm.site/alisms/phone_val', {
        type: 'GET',
        dataType: 'JSONP',
        data: {
          'tel': app.maskHuman.phone,
          'site': 'zy'
        },
        success: res => {
          if (res.success) {
            app.code = res.code
            app.countDown()
          } else {
            app.$warning({
              title: '短信发送出现错误，请稍后再试！'
            })
          }
        }
      })
    },
    sendSms4 () {
      const app = this
      $.ajax('http://api.zhuoyitm.site/alisms/phone_val', {
        type: 'GET',
        dataType: 'JSONP',
        data: {
          'tel': app.maskDown.phone,
          'site': 'zy'
        },
        success: res => {
          if (res.success) {
            app.code = res.code
            app.countDown()
          } else {
            app.$warning({
              title: '短信发送出现错误，请稍后再试！'
            })
          }
        }
      })
    },
    onSubmit1 () {
      const app = this
      if (app.maskSearch.code !== app.code) {
        app.$warning({
          title: '验证码错误'
        })
        return false
      }
      if (app.maskSearch.code === '') {
        app.$warning({
          title: '请输入验证码'
        })
        return false
      }
      $.ajax('http://api.zhuoyitm.site/api/save_customer', {
        type: 'GET',
        dataType: 'JSONP',
        data: {
          'tm_name': app.maskSearch.name,
          'tel': app.maskSearch.phone,
          'type': '',
          'from': '',
          'code': app.maskSearch.code,
          'site': 'new_zy',
          'sindustry': ''
        },
        success: res => {
          if (res.success) {
            app.maskSearch.show = false
            app.maskSearch.name = ''
            app.maskSearch.phone = ''
            app.maskSearch.code = ''
            app.maskSuccess = true
            window._agl && window._agl.push(['track', ['success', { t: 3 }]])
          } else {
            app.$warning({
              title: res.msg
            })
          }
          clearInterval(app.timer)
          app.btnText = '发送验证码'
          app.disabled = false
          app.count = 60
        }
      })
    },
    onSubmit2 () {
      const app = this
      if (app.maskApply.code !== app.code) {
        app.$warning({
          title: '验证码错误'
        })
        return false
      }
      if (app.maskApply.code === '') {
        app.$warning({
          title: '请输入验证码'
        })
        return false
      }
      $.ajax('http://api.zhuoyitm.site/api/save_customer', {
        type: 'GET',
        dataType: 'JSONP',
        data: {
          'tm_name': app.maskApply.name,
          'tel': app.maskApply.phone,
          'type': '',
          'from': '',
          'code': app.maskApply.code,
          'site': 'new_zy',
          'sindustry': ''
        },
        success: res => {
          if (res.success) {
            app.maskApply.show = false
            app.maskApply.name = ''
            app.maskApply.phone = ''
            app.maskApply.code = ''
            app.maskSuccess = true
            window._agl && window._agl.push(['track', ['success', { t: 3 }]])
          } else {
            app.$warning({
              title: res.msg
            })
          }
          clearInterval(app.timer)
          app.btnText = '发送验证码'
          app.disabled = false
          app.count = 60
        }
      })
    },
    onSubmit3 () {
      const app = this
      if (app.maskHuman.code !== app.code) {
        app.$warning({
          title: '验证码错误'
        })
        return false
      }
      if (app.maskHuman.code === '') {
        app.$warning({
          title: '请输入验证码'
        })
        return false
      }
      $.ajax('http://api.zhuoyitm.site/api/save_customer', {
        type: 'GET',
        dataType: 'JSONP',
        data: {
          'tm_name': '',
          'tel': app.maskHuman.phone,
          'type': '',
          'from': '',
          'code': app.maskHuman.code,
          'site': 'new_zy',
          'sindustry': ''
        },
        success: res => {
          if (res.success) {
            app.maskHuman.show = false
            app.maskHuman.phone = ''
            app.maskHuman.code = ''
            app.maskSuccess = true
            window._agl && window._agl.push(['track', ['success', { t: 3 }]])
          } else {
            app.$warning({
              title: res.msg
            })
          }
          clearInterval(app.timer)
          app.btnText = '发送验证码'
          app.disabled = false
          app.count = 60
        }
      })
    },
    onSubmit4 () {
      const app = this
      if (app.maskDown.code !== app.code) {
        app.$warning({
          title: '验证码错误'
        })
        return false
      }
      if (app.maskDown.code === '') {
        app.$warning({
          title: '请输入验证码'
        })
        return false
      }
      $.ajax('http://api.zhuoyitm.site/api/save_customer', {
        type: 'GET',
        dataType: 'JSONP',
        data: {
          'tm_name': '',
          'tel': app.maskDown.phone,
          'type': '',
          'from': '',
          'code': app.maskDown.code,
          'site': 'new_zy',
          'sindustry': ''
        },
        success: res => {
          if (res.success) {
            app.maskDown.show = false
            app.maskDown.phone = ''
            app.maskDown.code = ''
            app.maskSuccess = true
            window._agl && window._agl.push(['track', ['success', { t: 3 }]])
          } else {
            app.$warning({
              title: res.msg
            })
          }
          clearInterval(app.timer)
          app.btnText = '发送验证码'
          app.disabled = false
          app.count = 60
        }
      })
    },
    countDown () {
      this.disabled = true
      this.timer = setInterval(() => {
        this.count--
        this.btnText = this.count + 's后重新发送'
        if (this.count <= 0) {
          clearInterval(this.timer)
          this.btnText = '发送验证码'
          this.count = 60
          this.disabled = false
        }
      }, 1000)
    }
  },
  computed: {
    ...mapGetters(['name'])
  }
}
</script>

<style scoped>
h1, h2, h3, h4, h5, p, a, li, ul, div, span, input, textarea, form {
  margin: 0;
  padding: 0;
  font-weight: 500;
}

.w1190 {
  width: 1190px;
  margin: 0 auto;
}

.header-top {
  height: 36px;
  background: #f5f5f5;
  line-height: 36px;
  font-size: 12px;
}

.header-top .ant-btn {
  font-size: 12px
}

.header-top .header-top-text {
  float: left;
}

.header-top .header-top-component {
  float: right;
}

.header-top .header-top-component a {
  color: #333;
}

/deep/ .header-top .ant-btn {
  color: #666;
}

.header-logo {
  height: 133px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 5px 10px 1px rgb(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

/deep/ .header-search .ant-input {
  border-color: #b98611;
}

.header-logo .w1190 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.header-logo .logo-img {
  float: left;
}

.header-logo .header-search {
  wdith: 650px;
  float: right;
}

/deep/ .header-search .ant-form-inline .ant-form-item {
  margin-right: 0;
}

.header-nav {
  background-color: #ffffff;
  padding-bottom: 12px;
  position: relative;
  z-index: 9;
}

.header-nav .w1190 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-nav .first:hover .second {
  display: flex;
}

.header-nav .first > a {
  font-size: 16px;
  color: #666666;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  line-height: 40px;
}

.header-nav .first:hover > a {
  color: #ff2f32;
  font-weight: 700;
}

.header-nav .first .second {
  position: absolute;
  background-color: #ffffff;
  z-index: 1;
  width: 100%;
  left: 0;
  top: 40px;
  display: none;
}

.header-nav .first .second .w1190 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.header-nav .first .second a {
  font-size: 14px;
  background: url("../../../assets/images/icon_divide.png") no-repeat left center;
  padding: 0 25px 0 38px;
  color: #666666;
  line-height: 38px;
}

.header-nav .first .second a:first-child {
  background: none;
  padding-left: 0;
}

.header-nav .first .second a:hover {
  color: #ff2f32;
}

.header-nav a img {
  margin-left: 4px;
}

.btn-search {
  background: #b98611;
  border: 1px solid #b98611;
  border-radius: 0;
}

.footer-wrapper {
  background-color: #16181a;
  padding: 60px 0 23px;
}

.footer-wrapper ul {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1170px;
  margin: 0 auto;
  border-bottom: solid 1px #414550;
  padding-bottom: 44px;
}

.footer-wrapper ul li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 33.33%;
  position: relative
}

.footer-wrapper ul li:before {
  position: absolute;
  content: '';
  width: 1px;
  height: 74px;
  background-color: #414550;
  left: 0;
  top: 50%;
  margin-top: -37px;
}

.footer-wrapper ul li:first-child:before {
  width: 0;
}

.footer-wrapper ul li .txt {
  font-size: 16px;
  color: #ffffff;
  margin-left: 18px;
}

.footer-wrapper ul li .txt span {
  font-size: 20px;
  font-weight: 700;
}

.foot {
  text-align: center;
}

.foot .link {
  margin: 24px 0 15px;
}

.foot .link a {
  font-size: 16px;
  color: #ffffff;
  position: relative;
  padding: 0 18px;
}

.foot .link a:before {
  position: absolute;
  content: '';
  width: 1px;
  height: 13px;
  background-color: #d3d3d3;
  left: 0;
  top: 50%;
  margin-top: -6px;
}

.foot .link a:after {
  position: absolute;
  content: '';
  width: 1px;
  height: 13px;
  background-color: #727373;
  left: 1px;
  top: 50%;
  margin-top: -6px;
}

.foot .link a:first-child:before, .foot .link a:first-child:after {
  width: 0;
}

.foot p {
  font-size: 12px;
  color: #87888e;
  line-height: 24px;
  opacity: 0.6;
}

.foot > a {
  font-size: 12px;
  color: #a2a2a2;
  display: inline-block;
  margin-top: 4px;
}

.head {
  display: flex;
  align-items: center;
}

.head img {
  width: 95px;
}

.head .txt {
  text-align: left;
  margin-left: 15px;
}

.head .txt h2 {
  font-size: 35px;
  font-weight: 700;
  letter-spacing: 5px;
  background: linear-gradient(to bottom, #f6c02d, #b98611);
  -webkit-background-clip: text;
  color: transparent;
}

.head .txt h5 {
  font-size: 20px;
  background: linear-gradient(to bottom, #f6c02d, #b98611);
  -webkit-background-clip: text;
  color: transparent;
  margin-top: -8px;
}

.main {
  background: url("../../../assets/images/bg_main.jpg") no-repeat center;
  height: 560px;
}

.main .content {
  display: flex;
  justify-content: center;
}

.main .content .left {
  position: relative;
  width: 380px;
}

.main .content .left .part {
  font-size: 0;
  height: 187px;
  position: absolute;
  white-space: nowrap;
  width: 100%;
}

.main .content .left .part .intro {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  z-index: 3;
}

.main .content .left .part .hover {
  position: absolute;
  left: -1000px;
  top: 0;
  width: 0;
  height: 187px;
  transition: width 0.5s;
}

.main .content .left .part:hover .hover {
  width: 843px;
}

.main .content .left .part:nth-child(1) .hover {
  left: -373px;
}

.main .content .left .part:nth-child(2) .hover {
  left: -407px;
}

.main .content .left .part:nth-child(3) .hover {
  left: -411px;
}

.main .content .left .part:nth-child(1) {
  top: 0;
  right: 112px;
}

.main .content .left .part:nth-child(1) .txt .h4 {
  margin-right: 40px;
}

.main .content .left .part:nth-child(2) {
  top: 186px;
  right: 178px;
}

.main .content .left .part:nth-child(2) .txt .h4 {
  margin-right: 35px;
}

.main .content .left .part:nth-child(3) {
  top: 373px;
  right: 275px;
}

.main .content .left .img {
  margin-top: 24px;
  width: 121px;
  height: 127px;
  text-align: center;
  display: inline-block;
  transition: all 0.5s;
}

.main .content .left .part:nth-child(1) .img {
  background: url("../../../assets/images/img1.png") no-repeat center;
}

.main .content .left .part:nth-child(2) .img {
  background: url("../../../assets/images/img2.png") no-repeat center;
}

.main .content .left .part:nth-child(3) .img {
  background: url("../../../assets/images/img3.png") no-repeat center;
}

.main .content .left .part:nth-child(1):hover .img {
  background: url("../../../assets/images/img1s.png") no-repeat center;
}

.main .content .left .part:nth-child(2):hover .img {
  background: url("../../../assets/images/img2s.png") no-repeat center;
}

.main .content .left .part:nth-child(3):hover .img {
  background: url("../../../assets/images/img3s.png") no-repeat center;
}

.main .content .left .txt {
  display: inline-block;
  margin-top: 35px;
  margin-left: 35px;
}

.main .content .left .txt p {
  font-size: 20px;
  color: #01fcff;
  text-align: right;
  line-height: 33px;
  opacity: 0.8;
}

.main .content .left .txt .h4 {
  display: flex;
  align-items: center;
  margin-top: 12px;
}

.main .content .left .txt .h4 .icon {
  position: relative;
  width: 19px;
  height: 19px;
  overflow: hidden;
  margin-top: 4px;
}

.main .content .left .txt .h4 .icon .blue {
  position: absolute;
  left: 0;
  top: 0;
  transition: all 0.5s;
}

.main .content .left .txt .h4 .icon .white {
  position: absolute;
  left: 0;
  top: 19px;
  transition: all 0.5s;
}

.main .content .left .txt .h4 span {
  font-size: 28px;
  color: #01fcff;
  font-weight: 700;
  margin-left: 15px;
}

.main .content .left .part:hover .h4 span {
  color: #FFFFFF;
}

.main .content .left .part:hover .txt p {
  color: #FFFFFF;
}

.main .content .left .part:hover .h4 .icon .blue {
  top: -19px;
}

.main .content .left .part:hover .h4 .icon .white {
  top: 0;
}

.main .content .left .part:hover .img {
  margin-left: -30px;
}

.main .content .form {
  background: url("../../../assets/images/bg_form.png") no-repeat center 175px;
  width: 594px;
  height: 560px;
  padding-top: 84px;
}

.main .content .form .tit {
  position: relative;
  width: 246px;
  height: 12px;
  border-radius: 6px;
  background-color: #351686;
  margin: 0 auto 33px;
}

.main .content .form .tit span {
  position: absolute;
  width: 100%;
  left: 0;
  font-size: 36px;
  color: #FFFFFF;
  text-align: center;
  bottom: 3px;
}

.main .content .form p {
  margin: 0 auto 15px;
  display: flex;
  align-items: flex-start;
  width: 495px;
}

.main .content .form p span {
  font-size: 24px;
  color: #ffffff;
  height: 50px;
  width: 185px;
  text-align: center;
  border-radius: 8px;
  line-height: 46px;
  box-shadow: inset 0 0 2px 3px rgba(233, 165, 40, 1);
  background: #d38600;
  margin-right: 6px;
}

.main .content .form .input {
  font-size: 22px;
  color: #a87400;
  padding-left: 18px;
  letter-spacing: 1px;
  border: solid 3px #e0a400;
  background-color: #FFFFFF;
  box-shadow: inset 0 0 5px 1px rgba(233, 165, 40, 0.6);
  width: 302px;
  height: 50px;
  border-radius: 8px;
  outline: none;
}

.main .content .form .input::-webkit-input-placeholder {
  color: #a87400;
}

.main .content .form .input::-moz-placeholder {
  color: #a87400;
}

.main .content .form .input:-ms-input-placeholder {
  color: #a87400;
}

.main .content .form p .list {
  width: 302px;
  font-size: 0;
  margin-left: 13px;
}

.main .content .form p .list label {
  font-size: 20px;
  color: #FFFFFF;
  display: flex;
  align-items: center;
}
/deep/.main .content .form .ant-radio-group{
  display: flex;
  flex-flow: row wrap;
}
/deep/.main .content .form p .list label{
  margin-right: 22px;
}
/deep/.ant-radio-checked .ant-radio-inner{
  border-color: #e0a400;
  border-width: 2px;
}
/deep/.ant-radio-checked::after{
  border-color: #e0a400;
}
/deep/.ant-radio-inner{
  border-color: #e0a400;
  border-width: 2px;
}
/deep/.ant-radio-inner::after{
  background-color: #e14b22;
  top: 2px;
  left: 2px;
}

.main .content .form .submit {
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid 2px #e0a400;
  background-color: #d38600;
  width: 258px;
  height: 54px;
  border-radius: 8px;
  margin: 18px auto 0;
  cursor: pointer;
}

.main .content .form .submit span {
  margin-right: 8px;
  font-size: 22px;
  color: #FFFFFF;
  cursor: pointer;
}

.main .content .form .submit img {
  margin-top: 2px;
}

.footBar {
  background-color: #666d8e;
  border-top: solid 2px #5272f2;
  margin-top: 80px;
  margin-bottom: -20px
}

.footBar .container {
  position: relative;
  height: 50px;
  width: 1200px;
  margin: 0 auto;
}

.footBar .tit {
  position: absolute;
  background-image: linear-gradient(to bottom, #4c82e4, #3b5bd7);
  width: 122px;
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  color: #FFFFFF;
  left: 10px;
  top: -12px;
  text-align: center;
  box-shadow: 0 5px 5px 1px rgba(0, 0, 0, 0.2);
}

.footBar .tit:before {
  position: absolute;
  content: '';
  border-style: solid;
  border-width: 5px;
  border-color: transparent transparent #4d515e #4d515e;
  right: -10px;
  top: 0;
}

.footBar .tit:after {
  position: absolute;
  content: '';
  border-style: solid;
  border-width: 5px;
  border-color: transparent #4d515e #4d515e transparent;
  left: -10px;
  top: 0;
}

.footBar .nav {
  height: 100%;
  display: flex;
  align-items: center;
  margin-left: 184px;
}

.footBar .nav a {
  cursor: pointer;
  margin-right: 74px;
  font-size: 14px;
  color: #FFFFFF;
  letter-spacing: 0.8px;
}

.mask {
  position: fixed;
  z-index: 9;
  background-color: rgba(0, 0, 0, 0.5);
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.mask .box {
  background-color: #FFFFFF;
  width: 660px;
  height: 412px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -330px;
  margin-top: -206px;
  display: flex;
}

.mask .box .close {
  position: absolute;
  right: 16px;
  top: 16px;
  cursor: pointer;
  z-index: 1;
}

.mask .box .form {
  width: 386px;
  position: relative;
  padding: 0 38px;
}

.mask .box .form .tit {
  font-size: 20px;
  color: #4b5776;
  font-weight: 700;
  line-height: 78px;
  display: flex;
  align-items: center;
}

.mask .box .form .tit img {
  margin-right: 10px;
}

/deep/ .mask .box .form .ant-form-item {
  margin-bottom: 18px;
  position: relative;
}

/deep/ .mask .box .form .ant-input {
  border: none;
  border-radius: 0;
}

.mask .box .form .input {
  background-color: #eceaf7;
  font-size: 16px;
  color: #4b5776;
  width: 100%;
  height: 44px;
  letter-spacing: 0.9px;
  padding-left: 15px;
}

.mask .box .form .txt {
  font-size: 15px;
  color: #4b5776;
  line-height: 24px;
  margin: -8px 0 22px;
}

/deep/ .mask .box .form .ant-btn {
  border: none;
  border-radius: 0;
}

/deep/ .mask .box .form .ant-form-item-children {
  display: flex;
}

/deep/ .mask .box .form .getCode .ant-btn {
  font-size: 16px;
  color: #FFFFFF;
  font-weight: 700;
  background-color: #d59b00;
  position: absolute;
  height: 44px;
  right: 0;
  top: 0;
  width: 130px;
  letter-spacing: 1px;
  cursor: pointer;
  padding: 0;
}

/deep/ .mask .box .form .submit .ant-btn {
  font-size: 18px;
  color: #FFFFFF;
  font-weight: 700;
  background-color: #25b1b3;
  display: block;
  line-height: 44px;
  cursor: pointer;
  text-align: center;
  margin-top: 26px;
  letter-spacing: 0.8px;
  width: 100%;
  height: 44px;
}

.mask .box .form .phone {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 20px;
  text-align: center;
  font-size: 14px;
  color: #4b5776;
  line-height: 20px;
}

.mask .box .info {
  background: url("../../../assets/images/img_box.jpg") no-repeat center;
  width: 274px;
  height: 412px;
  padding: 0 30px;
}

.mask .box .info p {
  color: rgba(255, 255, 255, 0.5);
  font-size: 15px;
  line-height: 26px;
  margin-top: 63px;
}

.mask .box .info h4 {
  color: #FFFFFF;
  font-size: 18px;
  line-height: 42px;
  letter-spacing: 1px;
}

.maskSearch .box .form {
  padding-top: 24px;
}

.maskApply .box .form {
  padding-top: 24px;
}

.maskHuman .box .form {
  padding-top: 24px;
}

.maskDown .box .form {
  padding-top: 9px;
}

.maskSuccess .box .form {
  padding-top: 48px;
}

.maskSuccess .box .form .txt {
  margin-top: 3px;
}

.maskSuccess .box .form .sure {
  font-size: 18px;
  color: #FFFFFF;
  font-weight: 700;
  background-color: #25b1b3;
  display: block;
  line-height: 44px;
  cursor: pointer;
  text-align: center;
  margin-top: 49px;
  letter-spacing: 12px;
}
</style>
